// 子类的作用：
// 1. 定义render函数确认自己需要展示的dom结构
// 2. 定义当前页面需要展示的状态，传递用户传递的状态给父类
// 3. 监听用户行为，比如点击，hover，scroll等，调用父类设置状态的函数


class LikeButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLiked: false
        };
    }
    onClick() {
        this.setState({
            isLiked: !this.state.isLiked
        });
    }

    render() {
        return `
        <button class='like-btn' style="background-color:${this.props.bgColor}">
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `
    }
}

class RedBlueButton extends Component {
    constructor(props) {
        super(props)
        this.state = {
            color: 'red'
        }
    }
    onClick() {
        this.setState({
            color: 'blue'
        })
    }
    render() {
        return `
        <div style='color: ${this.state.color};'>${this.state.color}</div>
      `
    }
}


const wrapper = document.querySelector('.wrapper');
mount(new LikeButton({
    bgColor: 'red'
}), wrapper)
mount(new RedBlueButton(), wrapper)